 
<div id="msg_dashboard">
    <ul>
        <li><a href="javascript:void()" onClick="getMsg('inbox')">Inbox</a></li>
        <li><a href="javascript:void()" onClick ="getMsg('drafts')">Drafts</a></li>
        <li><a href="javascript:void()" onClick="getMsg('sent_items')">Sent Items</a></li>
        <li><a href="javascript:void()" onClick="getMsg('trash')">Trash</a></li>
    </ul>
</div>

<script>
function getMsg(mode){
    
    var label = '';
    
    if (mode == 'drafts') label = "Drafts";
    else if (mode == 'sent_items') label = "Sent Items";
    else if (mode == 'trash') label = "Trash";
    else if (mode == 'inbox') label = "Inbox";
    
    
    $('#msg').text(label);

    $('#messageGrid').setGridParam({
        postData:
            {
                mode: mode
            }
    }).trigger('reloadGrid');

    
}    
</script>
<style>
#msg_dashboard {
	width: 200px!important;
	margin-top: 10px!important;
}

#msg_dashboard li a {
	text-decoration: none !important;
	height: 32px!important;
  	voice-family: "\"}\""!important;
  	voice-family: inherit!important;
  	height: 24px!important;
}

#msg_dashboard li a:link, #menu8 li a:visited {
	color: #777!important;
	display: block!important;
	background: url(../assets/images/menu8.gif)!important;
	padding: 8px 0 0 20px!important;
}

#msg_dashboard li a:hover {
	color: #257EB7!important;
	background: url(../assets/images/menu8.gif) 0 -32px!important;
	padding: 8px 0 0 25px!important;
}

#msg_dashboard li a:active {
	color: #fff;
	background: url(../assets/images/menu8.gif) 0 -64px!important;
	padding: 8px 0 0 25px!important;
}

#msg_dashboard ul {
	list-style: none!important;
	margin: 0!important;
	padding: 0!important;
}

</style>